<template>
  <div class="cardContainer">
    <div class="card">
      <p class="city">PINK CITY</p>
      <p class="weather">PARTILY CLOUDY</p>
      <svg
          class="weather"
          id="Layer_1"
          x="0Px"
          y="0Px"
          width="50Px"
          height="50Px"
          viewBox="0 0 100 100"
          xml:space="preserve"
      >
      <image
          id="image0"
          width="100"
          height="100"
          x="0"
          y="0"
          href=""
      ></image>
    </svg>
      <p class="temp">32°</p>
      <div class="minmaxContainer">
        <div class="min">
          <p class="minHeading">Min</p>
          <p class="minTemp">30°</p>
        </div>
        <div class="max">
          <p class="maxHeading">Max</p>
          <p class="maxTemp">32°</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  
</script>

<style scoped lang="scss">
  .cardContainer {
    width: fit-content;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .card {
    position: relative;
    width: 220Px;
    height: 250Px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20Px 10Px;
    border-radius: 10Px;
    backdrop-filter: blur(30Px);
    background-color: rgba(65, 65, 65, 0.308);
    border: 1Px solid rgba(255, 255, 255, 0.089);
    cursor: pointer;
  }
  
  .city {
    font-weight: 700;
    font-size: 0.9em;
    letter-spacing: 1.2Px;
    color: white;
  }
  
  .weather {
    font-weight: 500;
    font-size: 0.7em;
    letter-spacing: 1.2Px;
    color: rgb(197, 197, 197);
  }
  
  .temp {
    font-size: 1.8em;
    color: white;
  }
  
  .minmaxContainer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .min,
  .max {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0Px 20Px;
    gap: 4Px;
  }
  
  .max {
    align-items: flex-start;
    border-left: 2Px solid white;
  }
  
  .maxHeading,
  .minHeading {
    font-size: 0.7em;
    font-weight: 600;
    color: white;
  }
  
  .maxTemp,
  .minTemp {
    font-size: 0.6em;
    font-weight: 500;
    color: rgb(197, 197, 197);
  }
  
  .cardContainer::before {
    width: 100Px;
    height: 100Px;
    content: "";
    position: absolute;
    background-color: rgb(144, 161, 255);
    z-index: -1;
    border-radius: 50%;
    left: 100Px;
    top: 50Px;
    transition: all 1s;
  }
  
  .cardContainer:hover::before {
    transform: translate(-50Px, 50Px);
  }
</style>